import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

class CardBlot extends BlockEmbed {
  static blotName = 'card';
  static tagName = 'figure';
  static className = 'link-card';

  static create(value): any {
    const node = super.create(value);
    const { url, img, title } = value;
    node.setAttribute('contenteditable', 'false');

    const linkCardContent = document.createElement('span');
    linkCardContent.classList.add('link-card-content');

    const linkCardText = document.createElement('span');
    linkCardText.classList.add('link-card-text');
    const linkCardTitle = document.createElement('span');
    linkCardTitle.classList.add('link-card-title');
    linkCardTitle.textContent = title;
    const linkCardMeta = document.createElement('span');
    linkCardMeta.classList.add('link-card-meta');
    linkCardMeta.textContent = url;
    const iconImg = document.createElement('img');
    iconImg.setAttribute('src', 'assets/icons/link.svg');
    iconImg.setAttribute('width', '18px');
    iconImg.setAttribute('height', '18px');
    linkCardMeta.insertBefore(iconImg, linkCardMeta.childNodes[0]);
    linkCardText.appendChild(linkCardTitle);
    linkCardText.appendChild(linkCardMeta);

    const imgCell = document.createElement('span');
    imgCell.classList.add('link-card-img-cell');
    const imgDom = document.createElement('img');
    imgDom.setAttribute('src', img);
    imgCell.appendChild(imgDom);

    linkCardContent.appendChild(linkCardText);
    linkCardContent.appendChild(imgCell);

    node.appendChild(linkCardContent);

    node.addEventListener('click', () => {
      node.classList.toggle('focused');
    });
    return node;
  }

  // static value(node): any {
  //   const imgDom = node.querySelector('img');
  //   return {
  //     url: imgDom.getAttribute('src'),
  //     img: '',
  //     width: imgDom.getAttribute('width'),
  //     height: imgDom.getAttribute('height')
  //   };
  // }
}

export default CardBlot;
